@extends('member.userCommon')
@section('content')
	<style>
		.switch {
			display: inline-block;
			line-height: 30px;
			vertical-align: middle;
		}
	</style>
	<div class="row">
		<div class="col-md-12  header-wrapper" >
			<h1 class="page-header text">我的关注
				<ul class="nav navbar-top-links" style="display:inline-block; position:relative; top:10px;">
					<li class="dropdown">
						<a class="dropdown-toggle userdd" data-toggle="dropdown" href="javascript:void(0)" title="点击微信扫描关注我们">
							<div class="userprofile small">
								<span class="userpic"><img src="{{asset('img/qrcode_demo.jpg')}}" alt="" class="userpicimg" style="border-radius:0"></span>
							</div>
							<i class="caret"></i>
						</a>
						<ul class="dropdown-menu dropdown-user">
							<li> <a href="#"><img src="{{asset('img/weixin_qrcode.jpg')}}" width="150" alt=""></a> </li>
							<li> <a href="#"><i class="fa fa-wechat fa-fw"></i> 微信扫描关注我们</a> </li>
						</ul>
						<!-- /.dropdown-user -->
					</li>
				</ul>
				<!-- /.dropdown -->
			</h1>
			<p class="page-subtitle">关注奇异果官方微信公众号，您喜欢的主播上线第一时间有通知哦！</p>
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<!-- /.row -->
	<ol class="breadcrumb">
		<li><a href="javascript:void(0)">我的关注</a></li>
		<li class="active">我的主播</li>
	</ol>

	<!-- /.row -->
	<div class="row">
		<div class="col-md-12">
			<div class="row">
				<div class="col-lg-12">
				@foreach($user->followedAnchors()->orderBy('status', 'desc')->get() as $anchor)
					<!-- /.col-lg-3 col-md-4 -->
						<div class="col-lg-3 col-md-4 col-sm-6">
							<div class="panel panel-default userlist">
								<div class="panel-body text-center">
									<div class="userprofile">
										<div class="userpic">
											<a href="{{ $anchor->home_page }}" target="_blank" title="TA的主页"><img src="{{$anchor->avatar}}" alt="" class="userpicimg"></a>
										</div>
										<h3 class="username">{{ $anchor->name }}</h3>
										<p><a href="{{ $anchor->live->url }}" title="{{ $anchor->live->name }}"  target="_blank">{{ $anchor->live->name }}</a></p>
									</div>
									<p>{{ $anchor->room_name }}</p>
									<div class="socials tex-center">
										<a href="{{ $anchor->home_page }}" class="btn btn-circle btn-warning" title="TA的主页"><i class="fa fa-home"></i></a>
										@foreach($anchor->tag()->attributes()->take(5)->get() as $attr)
											<a href="{{ $attr->link }}" title="{{ $attr->name }}" target="_blank" rel="nofollow">
												<img src="{{ route('image', [$attr->icon, '30x30']) }}" alt="" class="gridpic">
											</a>
										@endforeach
									</div>
								</div>
								<div class="panel-footer">
									@if ($anchor->status == 1)
										<span class="status active">正在直播</span>
									@else
										<span class="status inactive">主播不在</span>
									@endif
										<div class="switch">
											<input id="{{$anchor->id}}" class="cmn-toggle cmn-toggle-round"
												   type="checkbox" name="platform" v-model="platform" @if($anchor->pivot->subscribe) checked="checked" @endif data-id="{{$anchor->id}}">
											<label for="{{$anchor->id}}" style="border:none;"></label>
										</div>
									<a href="javascript:void(0);" data-id="{{$anchor->id}}" title="取消关注" class="delete-compere btn btn-link pull-right favorite unfollow"><i class="fa fa-heart"></i></a>
								</div>
							</div>
						</div>
						<!-- /.col-lg-3 col-md-4 -->
				@endforeach
				</div>
			</div>
		</div>
	</div>
	<!-- /.row -->
	<!-- layer.js -->
	<script>
		var $follow_url = '{{ url('/api/anchors') }}';

		$('.unfollow').on('click', function () {
			//询问框

			var $box = $(this).parents('div.col-lg-3');
			var id = $(this).data('id');

			layer.confirm('取消关注将不会返还积分！', {
				btn: ['确认','取消'],
				title : '确认取消关注',
				icon: 3
			}, function(){

				var load_index = layer.load(1, {time: 10*1000});
				$.getJSON($follow_url + '/' + id + '/follow', function (res) {
					if (res.error == 1) $box.remove();
					layer.close(load_index);
					layer.alert(res.msg, {
						icon: res.error
					})
				});

			});
		});

		$('.switch input').on('change', function () {
		    var $this = $(this)
		    var id = $(this).data('id')
            if ($(this).prop('checked')) {

                var load_index = layer.load(1, {time: 10*1000});
                $.getJSON($follow_url + '/' + id + '/subscribe', function (res) {
                    layer.close(load_index);
                    layer.alert(res.msg, {
                        icon: res.error
                    })
                });
            } else {
                layer.confirm('关闭主播上线微信推送将不会收到主播上线通知！', {
                    btn: ['确认','取消'],
                    title : '关闭主播上线微信推送',
                    icon: 3
                }, function(){

                    var load_index = layer.load(1, {time: 10*1000});
                    $.getJSON($follow_url + '/' + id + '/unsubscribe', function (res) {
                        layer.close(load_index);
                        layer.alert(res.msg, {
                            icon: res.error
                        })
                    });

                }, function () {
                    $this.prop('checked', true)
				});
            }
        });

	</script>


@endsection